<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node节点对象</title>
    <style>
        div{
            border: 5px solid rebeccapurple;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            margin-left: 50px;
            margin-top: 50px;
            width: 100px;
            height: 100px;
        }
        #div3{
            margin-left: 75px;
            margin-top: 75px;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>
<a id="del" href="javaScript:void(0)">删除子节点</a>
<a id="add" href="javaScript:void(0)">添加子节点</a>
<script>
    /*
    * 节点对象：可以是元素节点、文本节点、属性节点。是其他五个对象的父对象。
    * 所有dom对象都可以被认为是一个节点对象
    * 方法：crud DOM树
    *           appendChild()
    *           removeChild()
    *           replaceChild()
    * 属性：获取父节点
    *           parentNode()
    * */
    /*
    * 超链接的两个功能：1.可以被点击，2.点击后跳转到href指定的url
    * 需求：保留1，删除2.实现href="javaScript:void(0);"
    * */
    var ele_del = document.getElementById("del");
    ele_del.onclick=function (){
    //    获取两个节点
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
    //    删除子节点
        div1.removeChild(div2);
    }
    var ele_add= document.getElementById("add");
    ele_add.onclick=function (){
        //    获取两个节点
        var div1 = document.getElementById("div1");
        //创建节点
        var div3 = document.createElement("div");
        //为div3添加属性
        div3.setAttribute("id","div3");
        div3.innerHTML="div3";
        //为div1添加子节点div3

        div1.appendChild(div3);
        //var div2 = document.getElementById("div2");
        //    删除子节点
        //div1.removeChild(div2);
    }
</script>
</body>
</html>